<!DOCTYPE html>
<html style="">
<head>
 <meta charset="UTF-8"/>
 <meta name="viewport"
       content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
 <title></title>
 <!-- 引入uniapp -->
 <script src="./js/uni.webview.1.5.6.js" type="text/javascript"></script>
 <!-- 引入天地图 -->
 <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=a089dabb9c75cd0944e1013b54611773" type="text/javascript"></script>
 <script>
   let map; //地图实例
   let zoom = 16; //缩放等级

   //等待dom加载
   function onLoad() {
     let lnglat = {};
     map = new T.Map('mapDiv');//实例化地图
     map.centerAndZoom(new T.LngLat(114.09974, 22.549), zoom);//默认数值
     let geolocation = new T.Geolocation()


     getCurrentPositionCallback = function (e) {
       //根据经纬度重新设置地图
       if (this.getStatus() == 0) {
         map.centerAndZoom(e.lnglat, 16)
         lnglat = e.lnglat
         var marker = new T.Marker(e.lnglat);
         map.addOverLay(marker);
       }
       if (this.getStatus() == 1) {
         map.centerAndZoom(e.lnglat, e.level)
         lnglat = e.lnglat
         var marker = new T.Marker(e.lnglat);
         map.addOverLay(marker);
       }
     }

     //获取当前用户经纬度
     geolocation.getCurrentPosition(getCurrentPositionCallback);

     // 等待uniapp加载完成后发送信息
     document.addEventListener('UniAppJSBridgeReady', function () {
       uni.postMessage({
         data: {
           title: '天地图',
           msg: '我滴任务完成啦'
         },
       })
     })
   }
 </script>

 <style>
   body, html {
     padding: 0;
     margin: 0;
     width: 100%;
     height: 100%;
     transform: translateX(-1.5px);
   }
 </style>
</head>
<body style="width:100%; height:100%" onLoad="onLoad()">
<div id="mapDiv" style="width:100%; height:100%"></div>
</body>
</html>